<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('teleMarketing.no1')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('teleMarketing.no5')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
 
    <!-- -------------搜索查询栏------------------------ -->
    <search 
        :searchData="searchData" 
        @search="search" 
        @putExcel="putExcel" 
        :searchRight="true"
        :outputRight="$store.state.common.permiss.dailyconversion.includes('export')"
    ></search>
    
    <div class="list_operation" >
        <el-button  type="primary" @click="update" size="small">{{$t('teleMarketing.no66')}}</el-button>
        <span class="ml20" style="font-size:14px;line-height:30px;" v-if="upTime">{{$t('teleMarketing.no67')}}：{{upTime}}</span>
    </div>
    <!-- -------------表单显示栏------------------------ -->
    <div class="table" v-if="true">
      <template>
        <el-table :data="tableData" size="small" >
          <el-table-column align="center" prop="time" :label="$t('public.no33')" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.time!==undefined&&scope.row.time!==''">{{scope.row.time.slice(0,10)}}</span>
              <span v-else>{{$store.state.common.nullData}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="adminName" :label="$t('teleMarketing.no7')">
          </el-table-column>
          <el-table-column align="center" prop="assignUser" :label="$t('teleMarketing.no68')">
          </el-table-column>
          <el-table-column align="center" prop="followUser" :label="$t('teleMarketing.no24')">
          </el-table-column>
          <el-table-column align="center" prop="oneDayApplyUser" :label="$t('teleMarketing.no29')">
          </el-table-column>
          <el-table-column align="center" prop="oneDayLoanUser" :label="$t('teleMarketing.no30')">
          </el-table-column>
          <el-table-column align="center" prop="threeDayApplyUser" :label="$t('teleMarketing.no31')">
          </el-table-column>
          <el-table-column align="center" prop="threeDayLoanUser" :label="$t('teleMarketing.no32')">
          </el-table-column>
          <el-table-column align="center" prop="sevenDayApplyUser" :label="$t('teleMarketing.no33')">
          </el-table-column>
          <el-table-column align="center" prop="sevenDayLoanUser" :label="$t('teleMarketing.no34')">
          </el-table-column>
        </el-table>
        <!-- ------------  分页显示栏  ------------------------ -->
        <el-row type="flex" justify="end">
          <div class="pages" >
              <el-pagination
              @current-change="handleCurrentChange"
              :current-page="pagination.current"
              layout="sizes, prev, pager, next, total,->"
              :page-sizes="pagination.pageSizeOptions"
              :page-size="pagination.pageSize"
              @size-change="handleSizeChange"
              :total="pagination.total">
              </el-pagination>
          </div>
        </el-row>
      </template>
    </div>

    

    <div class="foot"></div>

  </div>
</template>
<script>
import putExcel from 'src/mixins/putExcel.js';//导出excel
import telemarketMem from 'src/mixins/telemarketMem.js';//获取电销员下拉
export default {
  mixins:[putExcel,telemarketMem],
  data () {
    const searchData=[
      {
        type: 'rangePicker',
        label: 'public.no33',
        attr: 'searchTime',
        value: [],
      },
      {
        type: 'select',
        attr: 'adminId',
        label: 'teleMarketing.no7',
        option: [], 
        value: '',
        langFlag: false,
      }
    ];
    return {
      flag: true,
      searchData:searchData,
      // 用户查询信息数据对应字段
      formInline: {
        adminId:'',
        beginTime: '',
        endTime: ''
      },
      pagination: {//列表页码
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      upTime:'',
      // 用户信息数据模拟
      tableData:[],
      putExcelUrl:this.$action.telemarket_dailyconExport, //导出接口
    }
  },
  methods: {
    handleSizeChange (val) {// 已分配每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 已分配分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    getTableData () { // 获取列表
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }       
      }
      this.$axios.post(this.$action.telemarket_dailyconversion, option).then(res => {
        this.flag = true;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    search(search) { // 搜索
        this.formInline=search;
        this.formInline.beginTime=search.searchTime?search.searchTime[0]:'';
        this.formInline.endTime=search.searchTime?search.searchTime[1]:'';
        if (this.flag) {
          this.flag = false;
          this.pagination.current = 1;
          this.getTableData();
        }
    },
    update(){//数据更新
      let option = {
        param: {}       
      }
      this.$axios.post(this.$action.telemarket_dailyconUpdate, option).then(res => {
        if (res.code == 200) {
          this.upTime = res.timestamp;
          this.getTableData();
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    }
  },
  mounted () {
    this.telemarketMem().then(arr=>{// 获取在职电销员
      this.searchData[1].option=arr;
    })
    this.getTableData();
  }
}
</script>

<style scoped lang="scss">
  
</style>
